<template>

    <!--顶部修改-->
	<div style="margin-bottom: 10px;">
		<el-button type="primary" style="margin-right: 10px;" @click= "EditPersonInfoClick">修改信息</el-button>
	</div>

	<!--信息一栏-->
    <el-row :gutter="10">
        <el-col :span="12">
            <div>
                <el-card style="text-align: center;">
                    <template #header>
                        <div style="font-weight: bolder; font-size: large;"><span>个人姓名</span></div>
                    </template>
                    <p>{{ GetPersonInfoData?.employeeName }}</p>
                </el-card>
            </div>
        </el-col>
        <el-col :span="12">
            <div>
                <el-card style="text-align: center;">
                    <template #header>
                        <div style="font-weight: bolder; font-size: large;"><span>联系电话</span></div>
                    </template>
                    <p>{{ GetPersonInfoData?.employeePhone }}</p>
                </el-card>
            </div>
        </el-col>
    </el-row>

    <el-row :gutter="10" style="margin-top: 20px;">
        <el-col :span="8">
            <div>
                <el-card style="text-align: center;">
                    <template #header>
                        <div style="font-weight: bolder; font-size: large;"><span>性别</span></div>
                    </template>
                    <p>{{ GetPersonInfoData?.employeeSex }}</p>
                </el-card>
            </div>
        </el-col>
        <el-col :span="8">
            <div>
                <el-card style="text-align: center;">
                    <template #header>
                        <div style="font-weight: bolder; font-size: large;"><span>年龄</span></div>
                    </template>
                    <p>{{ GetPersonInfoData?.employeeAge }}</p>
                </el-card>
            </div>
        </el-col>
        <el-col :span="8">
            <div>
                <el-card style="text-align: center;">
                    <template #header>
                        <div style="font-weight: bolder; font-size: large;"><span>岗位</span></div>
                    </template>
                    <p>{{ GetPersonInfoData?.employeePosition }}</p>
                </el-card>
            </div>
        </el-col>
    </el-row>

    <el-dialog title="修改个人资料" width="500" v-model="EditPersonDialog">
        <el-form :model="PutEmployeeData" label-width="auto">
            <el-form-item label="姓名">
                <el-input v-model="PutEmployeeData.employeeName" :placeholder="PutEmployeeData.employeeName" />
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="PutEmployeeData.employeePhone" :placeholder="PutEmployeeData.employeePhone" />
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="PutEmployeeData.employeeSex" :placeholder="PutEmployeeData.employeeSex">
                    <el-option key="1" label="男" value="男"/>
                    <el-option key="2" label="女" value="女"/>
                </el-select>
            </el-form-item>
            <el-form-item label="年龄">
                <el-input-number v-model="PutEmployeeData.employeeAge" :min="1" :max="999" :placeholder="PutEmployeeData.employeeAge"/>
            </el-form-item> 
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="EditPersonDialog = false">
                    取消
                </el-button>
                <el-button type="primary" @click="PutEmployee">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>

</template>

<script lang='ts' setup name=''>

// 导入必要组件
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { ElNotification, ElIcon } from 'element-plus';
import { Edit, Delete } from '@element-plus/icons-vue';
import { useUserStore } from '@/store/user'

// 导入类型
import { type Employee } from '@/types';

let userStore = useUserStore()
let EditPersonDialog = ref(false)

// 生命周期钩子
onMounted(async () => {
    await GetPersonInfo();
});

// 修改回调
function EditPersonInfoClick(){
    EditPersonDialog.value = true
}

// GET ------------------------------------------ GET //

// GET: 获取的员工数据
let GetPersonInfoData = ref<Employee>()
console.log(userStore.username)
// GET: 获取员工数据
async function GetPersonInfo(){
    try {
        const response = await axios.get<{ data: Employee }>(`/api/setting/${userStore.username}`);
        GetPersonInfoData.value=response.data.data
        console.log(response.data.data)
    } catch (error) {
        ElNotification.error({ message: '获取员工信息失败' });
    }
};

// PUT ------------------------------------------ PUT //

// PUT: 修改的数据对象
const PutEmployeeData = reactive<Employee>({
    employeeSex: '男',
});

// PUT: 修改数据对象
async function PutEmployee(){
    try {

        // url todo...
        await axios.put(`/api/employee/${GetPersonInfoData.value?.employeeID}`, {
            employeeID: GetPersonInfoData.value?.employeeID,
            employeeName: PutEmployeeData.employeeName,
            employeeSex: PutEmployeeData.employeeSex,
            employeeAge: PutEmployeeData.employeeAge,
            employeePosition: GetPersonInfoData.value?.employeePosition,
            employeePhone: PutEmployeeData.employeePhone,
        });
        ElNotification.success({ message: '员工信息修改成功' });
        EditPersonDialog.value = false;
        await GetPersonInfo();
    } catch (error) {
        ElNotification.error({ message: '员工信息修改失败' });
    }
};

</script>

<style scoped>

</style>